<template>
  <div class="app-container">
    <div class="custom_card">
      <el-row :gutter="15">
        <el-col :span="24" style="margin-bottom: 20px">
          <el-collapse
            accordion
            style="
              border: 1px solid rgb(242 242 242);
              text-align: left;
              border-radius: 4px;
              background-color: rgb(242 242 242);
            "
          >
            <el-row>
              <el-col :span="24">
                <div style="color: rgb(51 51 51); margin: 10px 10px">
                  <i class="el-icon-info" style="margin: 10px 10px"></i
                  >营销指南&nbsp;&nbsp;：<span style="color: rgb(163 155 155)"
                    >节日场景可多次创建活动，次数不限</span
                  >
                </div>
              </el-col>
            </el-row>
          </el-collapse>
        </el-col>
        <el-col :span="24" style="margin-top: 10px">
          <MmvTitle title="节日营销"> </MmvTitle>
        </el-col>
        <el-col :span="24">
          <MmvTitleSmall
            title="节假日场景运营"
            style="margin-bottom: 40px; top: 20px"
          ></MmvTitleSmall>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">元旦营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  {{ yuandan ? '节日已过' : '可创建' }}
                </div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(12)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(12)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">春节营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  {{ chunjie ? '节日已过' : '可创建' }}
                </div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(13)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(13)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">劳动节营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  {{ laodong ? '节日已过' : '可创建' }}
                </div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(14)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  :disabled="laodong"
                  @click="addActivity(14)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1" style="margin-top: 10px">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">端午节营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  {{ duanwu ? '节日已过' : '可创建' }}
                </div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(16)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  :disabled="duanwu"
                  @click="addActivity(16)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1" style="margin-top: 10px">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">中秋节营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  {{ zhongqiu ? '节日已过' : '可创建' }}
                </div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(17)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  :disabled="zhongqiu"
                  @click="addActivity(17)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1" style="margin-top: 10px">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">国庆节营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">
                  {{ guoqing ? '节日已过' : '可创建' }}
                </div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(18)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  :disabled="guoqing"
                  @click="addActivity(18)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-bottom: 30px">
        <MmvTitleSmall
          title="其他节日场景运营"
          style="margin-bottom: 40px; top: 20px"
        ></MmvTitleSmall>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">周末营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">可创建</div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(15)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(15)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">暑假营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">可创建</div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(19)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(19)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="7" :offset="1">
          <el-card class="box-card" style="width: 80%">
            <el-row>
              <el-col :span="12" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">寒假营销</div>
              </el-col>
              <el-col :span="6" :offset="6" style="margin-bottom: 10px">
                <div style="font-size: 18px; font-weight: 700">可创建</div>
              </el-col>
              <el-col :span="24"><el-divider></el-divider></el-col>
              <el-col :span="24">
                <el-button @click="historical(20)">历史活动</el-button>
                <el-button
                  type="primary"
                  style="float: right"
                  @click="addActivity(20)"
                  >创建营销活动</el-button
                >
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import MmvTitle from '@/components/MmvUI/MmvTitle.vue'
import MmvTitleSmall from '@/components/MmvUI/MmvTitleSmall.vue'
import { getLunar } from 'chinese-lunar-calendar'
export default {
  components: {
    MmvTitle,
    MmvTitleSmall,
  },
  data() {
    return {
      yuandan: false,
      chunjie: false,
      duanwu: false,
      laodong: false,
      zhongqiu: false,
      guoqing: false,
      /**
       * 阳历节日
       */
      festival: [
        { day: '1-1', name: '元旦节', id: 1 },
        { day: '5-1', name: '劳动节', id: 3 },
        { day: '10-1', name: '国庆节', id: 6 },
      ],
      /**
       * 农历节日
       */
      lFestival: [
        { day: '1-1', name: '春节', id: 2 },
        { day: '5-5', name: '端午节', id: 4 },
        { day: '8-15', name: '中秋节', id: 5 },
      ],
    }
  },
  created() {
    this.getholidayMarketing()
  },
  methods: {
    getholidayMarketing() {
      //获取当前日期月和日
      var date = new Date()
      var month = parseInt(date.getMonth() + 1)
      console.log(month, 'month')
      //获取当前日期是几号
      var day = date.getDate()
      console.log(day, 'day')
      // 获取农历
      var getLunarDay = getLunar(date.getFullYear(), month, day)
      var ymonth = getLunarDay.lunarMonth
      var yday = getLunarDay.lunarDate
    },
    addActivity(marketingTarget) {
      this.$router.push({
        name: 'activityManageAdd',
        query: { target: marketingTarget, type: 3 },
      })
      // this.$router.push({ path: '/activityManage/add/3/' + marketingTarget })
    },
    historical(marketingTarget) {
      this.$router.push({
        name: 'historicalActivities',
        query: { target: marketingTarget },
      })
    },
  },
}
</script>
<style scoped="scoped">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
.cardTitle {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
</style>
